<template>
  <div>
    <a-modal v-model:visible="visible" :title="getTitle" :width="clientWidth" @ok="handleOk">
      <div class="copypermis">
        <a-form
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="formData"
          ref="formRef"
          :rules="rules"
        >
          <a-row>
            <a-col :span="12">
              <div class="title">基础配置</div>
              <a-form-item label="名称" name="name">
                <a-input v-model:value="formData.name" placeholder="请输入名称" />
              </a-form-item>
              <a-form-item label="自编码" name="tag">
                <a-input v-model:value="formData.tag" placeholder="请输入自编码" />
              </a-form-item>
              <a-form-item label="数据类型" name="data_type">
                <a-select
                  placeholder="请选择数据类型"
                  v-model:value="formData.data_type"
                  :options="DataTypeOption"
                />
              </a-form-item>
              <a-form-item label="读写方式" name="tag">
                <a-radio-group v-model:value="formData.read_write_mod" :options="ReadTypeList" />
              </a-form-item>
              <a-form-item label="是否禁用" name="disable">
                <a-switch
                  :checkedValue="checkedValue"
                  :unCheckedValue="unCheckedValue"
                  v-model:checked="formData.disable"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <div class="title"
                >驱动配置 <span class="subtitle"> (*读写逻辑为:先发送在读取)</span></div
              >
              <!-- tcp_udp协议 -->
              <div v-if="protocol_type == 'tcp_udp'">
                <a-form-item label="规约" name="statute">
                  <a-select
                    placeholder="请选择规约"
                    v-model:value="formData.statute"
                    :options="statuteOption"
                  />
                </a-form-item>
                <a-form-item label="控制码" name="control_code">
                  <a-input v-model:value="formData.control_code" placeholder="请输入控制码" />
                </a-form-item>
                <a-form-item label="数据标识" name="data_flag">
                  <a-input v-model:value="formData.data_flag" placeholder="请输入数据标识" />
                </a-form-item>
              </div>
              <!-- modbus协议 -->
              <div v-if="protocol_type == 'modbus'">
                <a-form-item label="地址" name="address">
                  <a-input v-model:value="formData.address" placeholder="请输入地址" />
                </a-form-item>
                <a-form-item label="开始地址" name="registers_count">
                  <a-input v-model:value="formData.registers_count" placeholder="请输入开始地址" />
                </a-form-item>
                <a-form-item label="功能码" name="function_code">
                  <a-input v-model:value="formData.function_code" placeholder="请输入功能码" />
                </a-form-item>
                <a-form-item label="长度" name="objects_count">
                  <a-input v-model:value="formData.objects_count" placeholder="请输入长度" />
                </a-form-item>
                <a-form-item label="系数" name="operation_value">
                  <a-input v-model:value="formData.operation_value" placeholder="请输入系数" />
                </a-form-item>
                <a-form-item label="字节序" name="value_order">
                  <a-input v-model:value="formData.value_order" placeholder="请输入字节序" />
                </a-form-item>
              </div>
              <!-- s7协议 -->
              <div v-if="protocol_type == 's7'">
                <a-form-item label="从站地址" name="vice_address">
                  <a-input v-model:value="formData.vice_address" placeholder="请输入从站地址" />
                </a-form-item>
                <a-form-item label="开始地址" name="start_address">
                  <a-input v-model:value="formData.start_address" placeholder="请输入开始地址" />
                </a-form-item>
                <a-form-item label="长度" name="size">
                  <a-input v-model:value="formData.size" placeholder="请输入长度" />
                </a-form-item>
              </div>
              <!-- http协议 -->
              <div v-if="protocol_type == 'http'">
                <a-form-item label="键" name="key">
                  <a-input v-model:value="formData.key" placeholder="请输入键" />
                </a-form-item>
                <a-form-item label="URL" name="url">
                  <a-input v-model:value="formData.url" placeholder="请输入URL" />
                </a-form-item>
              </div>
              <!-- opcua协议 -->
              <div v-if="protocol_type == 'opcua'">
                <a-form-item label="路径" name="path">
                  <a-input v-model:value="formData.path" placeholder="请输入路径" />
                </a-form-item>
              </div>
              <a-form-item label="描述" name="describe">
                <a-textarea v-model:value="formData.describe" placeholder="请输入描述" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, computed, unref, onMounted, Ref } from 'vue';
  import { DataTypeOption, ReadTypeList } from '/@/enums/dateTypeEnum';
  import { addModelAttrList, modifyModelAttrList } from '/@/api/sys/gateway/gateway';
  let canshu = {
    protocol_type: '',
    name: '',
    tag: '',
    data_type: '',
    read_write_mod: 1,
    disable: 0,
    describe: '', //描述
    //modbus协议
    address: '',
    registers_count: '',
    objects_count: '',
    operation_value: '',
    value_order: '',
    function_code: '',
    // tcp_udp协议
    statute: '',
    control_code: '',
    data_flag: undefined,
    //s7
    vice_address: '',
    start_address: '',
    size: '',
    //opcua
    path: '',
    //http
    key: '',
    url: '',
  };
  export default defineComponent({
    emits: ['success'],
    setup(_, { emit }) {
      //显示隐藏弹框
      const visible = ref(false);
      const group_id = ref();
      let protocol_type = ref(''); //协议类型
      let checkedValue = ref(1);
      let unCheckedValue = ref(0);
      let isUpdate = ref(false);
      const clientWidth: Ref<string> = ref('');
      const statuteOption = reactive([
        {
          label: '07',
          value: '07',
        },
        {
          label: '97',
          value: '97',
        },
      ]);
      //表单数据
      const formData: any = reactive(canshu);
      //属性表单验证
      let rules = {
        name: {
          required: true,
          message: '请输入名称',
        },
        data_type: {
          required: true,
          message: '请选择数据类型',
        },
      };
      //添加
      function addEdite(data) {
        isUpdate.value = data.isUpdate;
        if (data.protocol_type == 'modbus') {
          Object.assign(formData, {
            statute: undefined,
            control_code: undefined,
            data_flag: undefined,
            function_code: undefined,
          });
        } else if (data.protocol_type == 'tcp_udp') {
          Object.assign(formData, {
            describe: undefined,
            address: undefined,
            registers_count: undefined,
            objects_count: undefined,
            operation_value: undefined,
            value_order: undefined,
          });
        } else if (data.protocol_type == 'http') {
          Object.assign(formData, {
            describe: undefined,
            key: undefined,
            url: undefined,
          });
        } else if (data.protocol_type == 'opcua') {
          Object.assign(formData, {
            path: undefined,
          });
        } else if (data.protocol_type == 'mysql') {
          Object.assign(formData, {
            data_flag: undefined,
          });
        } else {
          Object.assign(formData, {
            attr_name: undefined,
            unit: undefined,
            vice_address: undefined,
            start_address: undefined,
            size: undefined,
          });
        }
        if (data.isUpdate == false) {
          group_id.value = data.group_id;
          protocol_type.value = data.protocol_type;
          setData({
            group_id: data.group_id,
            protocol_type: data.protocol_type,
            disable: 0,
            read_write_mod: 1,
          });
        } else {
          let protocoltype = data.protocol_type;
          protocol_type.value = protocoltype;
          setData(data.rowData);
        }

        visible.value = true;
      }
      //获取编辑详情
      function setData(record) {
        formData.group_id = record.group_id;
        formData.id = record.id;
        formData.protocol_type = protocol_type.value;
        formData.name = record.name;
        formData.tag = record.tag;
        formData.data_type = record.data_type;
        formData.read_write_mod = record.read_write_mod;
        formData.disable = record.disable;
        formData.describe = record.describe;
        //modbus协议
        formData.address = record.address;
        formData.registers_count = record.registers_count;
        formData.objects_count = record.objects_count;
        formData.operation_value = record.operation_value;
        formData.value_order = record.value_order;
        formData.function_code = record.function_code;
        // tcp_udp协议
        formData.statute = record.statute;
        formData.control_code = record.control_code;
        formData.data_flag = record.data_flag;
        // s7协议
        formData.vice_address = record.vice_address;
        formData.start_address = record.start_address;
        formData.size = record.size;
        //opcua协议
        formData.path = record.path;
        //http
        formData.key = record.key;
        formData.url = record.url;
        visible.value = true;
      }
      const formRef = ref();
      const getTitle = computed(() => (!unref(isUpdate.value) ? '新建属性' : '修改属性'));
      //保存
      const handleOk = () => {
        formRef.value
          .validate()
          .then(() => {
            let rule = {
              //modbus协议
              describe: formData.describe,
              address: formData.address,
              registers_count: formData.registers_count,
              objects_count: formData.objects_count,
              operation_value: formData.operation_value,
              value_order: formData.value_order,
              function_code: formData.function_code,
              // tcp_udp协议
              statute: formData.statute,
              control_code: formData.control_code,
              data_flag: formData.data_flag,
              //s7
              vice_address: formData.vice_address,
              start_address: formData.start_address,
              size: formData.size,
              //opcua协议
              path: formData.path,
              //http
              key: formData.key,
              url: formData.url,
            };
            formData.rule = rule;
            if (isUpdate.value) {
              modifyModelAttrList(formData).then(() => {
                emit('success', { isUpdate: unref(isUpdate.value) });
                cancel();
                formRef.value.resetFields();
              });
            } else {
              addModelAttrList(formData).then(() => {
                emit('success', { isUpdate: unref(isUpdate.value) });
                cancel();
                formRef.value.resetFields();
              });
            }
          })
          .catch((error) => {
            console.log('error', error);
          });
      };
      function getclientWidth() {
        let Width: Number = document.body.clientWidth;
        if (Width > 1200) {
          clientWidth.value = document.body.clientWidth * 0.55 + 'px';
        } else {
          clientWidth.value = document.body.clientWidth * 0.85 + 'px';
        }
      }
      onMounted(() => {
        getclientWidth();
        window.onresize = () => {
          return (() => {
            getclientWidth();
          })();
        };
      });
      //取消
      const cancel = () => {
        visible.value = false;
      };
      return {
        clientWidth,
        protocol_type,
        statuteOption,
        unCheckedValue,
        checkedValue,
        DataTypeOption,
        ReadTypeList,
        addEdite,
        rules,
        getTitle,
        formRef,
        labelCol: { span: 5 },
        wrapperCol: { span: 17 },
        visible,
        formData,
        handleOk,
        cancel,
      };
    },
  });
</script>
<style lang="less" scoped>
  /deep/ .ant-modal-close-x {
    width: 70px;
    line-height: 46px;
  }
  .copypermis {
    padding: 20px;
    box-sizing: border-box;
    .title {
      margin-bottom: 20px;
      font-weight: 500;
    }
    .subtitle {
      color: #666;
      color: red;
      font-size: 14px;
    }
  }
</style>
